<template>
	<div @click.stop>
		<div class="search">
			<div class="m-search">
				<div class="m-groups-box">
					<div class="m-groups groups-default-width-1" @click="showResult('yx')">{{yxData.name}}</div>
					<span class="btn-open">▼</span>
					<div class="m-groups groups-default-width-1" @click="showResult('dq')">{{dqData.name}}</div>
					<span class="btn-open">▼</span>
					<div class="m-groups groups-default-width-2" @click="showResult('fwq')">{{fwqData.name}}</div>
					<span class="btn-open">▼</span>
				</div>
				｜<input class="m-search-box" v-model="seerch_content" type="text" placeholder="请输入搜索关键词">
				<div class="btn-search" @click="doSearch()">搜索</div>
				<div class="m-serch-result" v-show="menuList_isshow">
					<!-- 游戏分组显示分组信息-->
					<div class="game-group" v-if="isYX">
						分组： 
						<div @click="checkedGroup('all')" :class="groupIndex==-1 ? 'active' :''">全部</div>
						<div v-for="(item,index) in menuList" :key="index" :class="groupIndex==index ? 'active' :''">
							<span @click="checkedGroup(item,index)">{{item.groupName}}</span>
						</div>
					</div>
					<!-- showData：根据点击的按钮显示指定数据-->
					<el-row :gutter="20">
						<el-col :span="4" v-for="(obj,i) in showData" :key="i">
							<div class="grid-content" :title="obj.name" @click="selectedData(obj)">{{obj.name}}</div>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	const CONST_YX = "游戏";
	const CONST_DQ = "大区";
	const CONST_FWQ = "服务器";
	const CONST_ALL = "all";
	const CONST_YX_KEY = "yx";
	const CONST_DQ_KEY = "dq";
	const CONST_FWQ_KEY = "fwq";
	const GAME_ID_KEY = "gameId";
	import { listGame, listGameById} from '/api/index.js'
	import { getStore,setStore } from '/utils/storage'
	export default {
		name: "search",
		data() {
			return {
				seerch_content: "", //输入框中的内容
				menuList_isshow: false, //控制搜索结果栏显示隐藏
				showData: [],
				isYX: false,
				tagIndex: "",
				yxData: {
					name: CONST_YX
				},
				dqData: {
					name: CONST_DQ
				},
				fwqData: {
					name: CONST_FWQ
				},
				gameAreaTemp: [], //分区信息临时容器
				menuList: [],
				groupIndex:-1
			}
		},
		methods: {
			showResult(id) {
				this.menuList_isshow = this.menuList_isshow ? false : true;
				this.tabIndex = id;
				//点击游戏
				this.isYX = id == CONST_YX_KEY ? true : false;
				var _menuList = this.menuList;
				if(this.isYX) {
					var _yxData = [];
					for(var i = 0; i < _menuList.length; i++) {
						var _obj = _menuList[i];
						for(var j = 0; j < _obj.groupData.length; j++) {
							var tempObj = {};
							tempObj.id = _obj.groupData[j].id; 
							tempObj.name = _obj.groupData[j].name;
							_yxData.push(tempObj);
						}
					}
					this.showData = _yxData;
				} else {
					//未选择过游戏条件
					if(this.yxData.name == CONST_YX) {
						this.showResult(CONST_YX_KEY);
						this.menuList_isshow = true;
					} else { //已选择游戏
						this.showData = [];		//先清空显示数据，防止切换大区时展示游戏数据
						//点击大区
						if(this.tabIndex == CONST_DQ_KEY) {
							this.getlistGameAreaById(this.yxData.id);
						} else if(this.tabIndex == CONST_FWQ_KEY) {
							//点击服务器之前未选择大区就先显示大区
							if(this.dqData.name == CONST_DQ) {
								this.showResult(CONST_DQ_KEY);
								this.menuList_isshow = true;
							}else {
								this.getGameServers();
							}
						}
					}
				}

			},
			selectedData(obj) {
				//游戏页点击数据
				if(this.tabIndex == CONST_YX_KEY) {
					this.yxData = obj;
				} else if(this.tabIndex == CONST_DQ_KEY) {
					this.dqData = obj;
				} else if(this.tabIndex == CONST_FWQ_KEY) {
					this.fwqData = obj;
				}
				//收起数据展示框
				this.menuList_isshow = false;
			},
			setGroupData(data){
				var tempArray = [];
				for(var i = 0; i < data.length; i++) {
					var tempObj = {};
					tempObj.id = data[i]["id"];
					tempObj.name = data[i]["name"];
					tempArray.push(tempObj);
				}
				this.showData = tempArray;
				this.gameAreaTemp = data;
			},
			getlistGameAreaById(gameId) {
				listGameById({gameId:gameId}).then(res => {
					if(res.success === false) {
						this.error = true
						return;
					}
					setStore(GAME_ID_KEY+gameId,data);
					let data = res.data;
					if(data.length == 1){
						this.dqData = {
							id:data[0].id,
							name:data[0].name	
						};
					}else{
						this.setGroupData(data);
					}
				}).catch((e) => {
			      	 console.log(e)
				 });
			},
			getGroupData(gameId){			//获取分区数据
				if(getStore(GAME_ID_KEY+gameId)){
					this.setGroupData(getStore(GAME_ID_KEY+gameId));
				}else{
					this.getlistGameAreaById(gameId);					
				}
			},
			getGameServers(){		//获取服务器数据
				var gameAreaTemp = this.gameAreaTemp;
				for(var i = 0; i < gameAreaTemp.length;i++){
					var obj = gameAreaTemp[i];
					if(obj.id == this.dqData.id){
						var gameServer = obj.gameServer;
						try{
							this.showData = JSON.parse(gameServer);
						}catch(e){
							console.error(e);
						}
					}
				}
			},
			checkedGroup(item,itemIndex){				//选择游戏分组
				if(item == CONST_ALL){
					var _menuList = this.menuList;
					var _yxData = [];
					for(var i = 0; i < _menuList.length; i++) {
						var _obj = _menuList[i];
						for(var j = 0; j < _obj.groupData.length; j++) {
							var tempObj = {};
							tempObj.id = _obj.groupData[j].id; 
							tempObj.name = _obj.groupData[j].name;
							_yxData.push(tempObj);
						}
					}
					this.groupIndex = -1;
					this.showData = _yxData;
				}else{
					this.groupIndex = itemIndex;
					this.showData = item.groupData;
				}
			},
			doSearch(){
				let name = this.yxData.name == CONST_YX ? "" : this.yxData.name;
				let groupName = this.dqData.name == CONST_DQ ? "" : this.dqData.name;
				let gameServerName = this.fwqData.name == CONST_FWQ ? "" :this.fwqData.name;
				var gameObj = {
					id:this.yxData.id,
					name:name,
					gameId:this.yxData.id,
					groupId : this.dqData.id,
					groupName:groupName,
					gameServerId : this.fwqData.id,
					gameServerName : gameServerName,
					searchValue : this.seerch_content
				};
				this.$router.push({
		          name: 'goodsTransfer',
		          params: {
		            gameObj: gameObj
		          }
		        })
			}
		},
		//计算属性，当输入内容的时候下面的方法就会根据你输入的内容来过滤menuList数组中的数据
		computed: {
		},
		watch:{
			'yxData'(){
				//游戏选项变化初始化大区信息
				this.dqData = {name: CONST_DQ};
			},
			'dqData'(){
				//游戏选项变化初始化大区信息
				this.fwqData = {name: CONST_FWQ};
			}
		},
		mounted() {
			//点击其他区域隐藏搜索框
			document.body.addEventListener('click', () => {
				this.menuList_isshow = false;
			}, false);

			//获取游戏分类
			listGame().then(res => {
				if(res.success === false) {
					this.error = true
					return;
				}
				let data = res.data;
				if(data) {
					for(var i = 0; i < data.length; i++) {
						if("string" == typeof(data[i]["groupData"])) {
							data[i]["groupData"] = JSON.parse(data[i]["groupData"]);
						}
					}
				}
				this.menuList = data;
			}).catch((e) => {
		      	 console.log(e)
			 });
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
	.search {
		position: relative;
		width: 100%;
		height: 100%;
	}
	
	.m-search {
		position: relative;
		width: 80%;
		height: 50px;
		padding-left: 20px;
		line-height: 50px;
		display: flex;
		flex-direction: row;
		margin-left: 50px;
		border: 2px solid #FF8700;
		border-radius: 15px;
		background-color: white;
		padding-right: 80px;
		padding-left: 450px;
	}
	
	.m-search-box {
		width: 100%;
		padding-left: 10px;
		display: inline-block;
	}
	
	.m-groups-box {
		position: absolute;
		width: 450px;
		height: 100%;
		left: 0;
		padding-left: 20px;
		display: flex;
		flex-direction: row;
	}
	
	.m-groups {
		max-width: 130px;
		cursor: pointer;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.groups-default-width-1 {
		min-width: 30px;
	}
	
	.groups-default-width-2 {
		min-width: 45px;
	}
	
	.m-groups:hover {
		color: #FF8700;
	}
	
	.btn-open {
		font-size: 12px;
		margin-right: 20px;
		margin-left: 10px;
	}
	
	.btn-search {
		width: 80px;
		height: 48px;
		background-color: #FF8700;
		right: -2px;
		position: absolute;
		text-align: center;
		border-radius: 15px;
		color: #F2F2F2;
		font-size: 18px;
		cursor: pointer;
		letter-spacing: 5px;
	}
	
	.m-serch-result {
		position: absolute;
		width: 100%;
		height: 400px;
		background-color: white;
		margin-left: -450px;
		z-index: 999;
		top: 50px;
		border: 1px solid #FF8700;
		padding-left: 20px;
		padding-right: 20px;
		overflow-y: scroll;
	}
	
	.game-group {
		width: 95%;
		height: 40px;
		display: flex;
		flex-direction: row;
		border-bottom: 0.5px solid #AAAAAA;
		line-height: 40px;
	}
	
	.game-group div {
		width: 60px;
		height: 30px;
		margin-left: 30px;
	}
	
	.game-group div:hover {
		color: #FF8700;
		cursor: pointer;
	}
	
	.el-row {
		margin-bottom: 20px;
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.grid-content {
		border-radius: 4px;
		min-height: 36px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: pointer;
	}
	
	.grid-content:hover {
		color: #FF8700;
	}
	.active{
		color: #FF8700;	
	}
</style>